<template>
	<view class="mine-container">
		<!-- 资产总览 -->
		<view class="assets-overview">
			<view class="total-assets">
				<text class="label">总资产</text>
				<text class="amount">¥{{ formatNumber(totalAssets) }}</text>
			</view>
			<!-- 账户列表 -->
			<scroll-view class="account-list" scroll-x>
				<view class="account-item" v-for="(account, index) in accounts" :key="index">
					<text class="name">{{ account.name }}</text>
					<text class="balance">¥{{ formatNumber(account.balance) }}</text>
				</view>
			</scroll-view>
			<!-- 债务登记入口 -->
			<view class="debt-entries">
				<view class="entry" @tap="navigateToDebt('debt')">
					<text class="icon">📤</text>
					<text class="label">债务登记</text>
					<text class="amount" v-if="totalDebt > 0">¥{{ formatNumber(totalDebt) }}</text>
				</view>
				<view class="entry" @tap="navigateToDebt('credit')">
					<text class="icon">📥</text>
					<text class="label">债权登记</text>
					<text class="amount" v-if="totalCredit > 0">¥{{ formatNumber(totalCredit) }}</text>
				</view>
			</view>
		</view>

		<!-- 数据管理 -->
		<view class="data-management">
			<view class="section-title">数据管理</view>
			<view class="menu-list">
				<view class="menu-item" @tap="generateReport">
					<text class="icon">📊</text>
					<text class="label">月度报告</text>
					<text class="arrow">→</text>
				</view>
				<view class="menu-item" @tap="exportData">
					<text class="icon">📋</text>
					<text class="label">数据导出</text>
					<text class="arrow">→</text>
				</view>
			</view>
		</view>

		<!-- 个性化设置 -->
		<view class="settings">
			<view class="section-title">个性化设置</view>
			<view class="menu-list">
				<view class="menu-item">
					<text class="icon">🎨</text>
					<text class="label">主题设置</text>
					<view class="color-picker">
						<view v-for="(color, index) in themeColors" :key="index"
							:class="['color-dot', selectedTheme === index ? 'active' : '']"
							:style="{ backgroundColor: color }" @tap="selectTheme(index)"></view>
					</view>
				</view>
				<view class="menu-item">
					<text class="icon">🔐</text>
					<text class="label">生物识别</text>
					<switch :checked="biometricEnabled" @change="toggleBiometric" color="#007aff" />
				</view>
			</view>
		</view>
		
		<!-- 底部导航菜单 -->
		<tab-bar active-tab="mine"></tab-bar>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import TabBar from '../components/TabBar.vue';

	// 资产数据
	const totalAssets = ref(128000.50);
	const accounts = ref([{
			name: '现金',
			balance: 2000.00
		},
		{
			name: '储蓄卡',
			balance: 50000.50
		},
		{
			name: '信用卡',
			balance: -3000.00
		},
		{
			name: '投资',
			balance: 79000.00
		}
	]);

	const totalDebt = ref(5000.00);
	const totalCredit = ref(2000.00);

	// 主题设置
	const themeColors = ['#007aff', '#34c759', '#ff9500', '#ff2d55', '#5856d6'];
	const selectedTheme = ref(0);
	const biometricEnabled = ref(false);

	// 方法
	const formatNumber = (num) => {
		return Math.abs(num).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
	};

	const navigateToDebt = (type) => {
		uni.navigateTo({
			url: `/pages/debt/debt?type=${type}`
		});
	};

	const generateReport = () => {
		// 生成月度报告
		uni.showLoading({
			title: '生成报告中...'
		});
		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '报告已生成',
				icon: 'success'
			});
		}, 1500);
	};

	const exportData = () => {
		// 导出数据到Excel
		uni.showLoading({
			title: '导出中...'
		});
		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '已发送至微信',
				icon: 'success'
			});
		}, 1500);
	};

	const selectTheme = (index) => {
		selectedTheme.value = index;
		// 应用主题色
	};

	const toggleBiometric = (e) => {
		biometricEnabled.value = e.detail.value;
		// 处理生物识别开关
	};
</script>

<style lang="scss" scoped>
	.mine-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #e8f0ff 0%, #f0f7ff 50%, #f5faff 100%);
		padding: 20px;
		padding-top: 100upx;
		padding-top: 100upx;
	}

	.assets-overview {
		background-color: #fff;
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

		.total-assets {
			margin-bottom: 20px;

			.label {
				font-size: 14px;
				color: #666;
			}

			.amount {
				display: block;
				font-size: 32px;
				font-weight: bold;
				color: #333;
				margin-top: 4px;
			}
		}

		.account-list {
			white-space: nowrap;
			margin: 0 -20px;
			padding: 0 20px 20px;

			.account-item {
				display: inline-block;
				margin-right: 12px;
				padding: 12px 20px;
				background-color: #f5f5f5;
				border-radius: 12px;

				.name {
					font-size: 14px;
					color: #666;
				}

				.balance {
					display: block;
					font-size: 16px;
					font-weight: 500;
					color: #333;
					margin-top: 4px;
				}
			}
		}

		.debt-entries {
			display: flex;
			justify-content: space-between;

			.entry {
				flex: 1;
				margin: 0 6px;
				padding: 12px;
				background-color: #f5f5f5;
				border-radius: 12px;
				text-align: center;

				.icon {
					font-size: 20px;
					margin-bottom: 4px;
				}

				.label {
					display: block;
					font-size: 14px;
					color: #666;
					margin-bottom: 4px;
				}

				.amount {
					font-size: 12px;
					color: #ff3b30;
				}
			}
		}
	}

	.data-management,
	.settings {
		background-color: #fff;
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 20px;

		.section-title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 15px;
		}

		.menu-list {
			.menu-item {
				display: flex;
				align-items: center;
				padding: 12px 0;
				border-bottom: 1px solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.icon {
					font-size: 20px;
					margin-right: 12px;
				}

				.label {
					flex: 1;
					font-size: 16px;
					color: #333;
				}

				.arrow {
					color: #999;
				}

				.color-picker {
					display: flex;
					align-items: center;

					.color-dot {
						width: 24px;
						height: 24px;
						border-radius: 12px;
						margin-left: 8px;
						border: 2px solid transparent;

						&.active {
							border-color: #007aff;
						}
					}
				}
			}
		}
	}

	// 为底部腾出空间，防止内容被底部菜单遮挡
	.settings {
		margin-bottom: 150rpx;
	}
</style>